<template>
  <el-row :gutter="20">
    <el-col :span="2">
      <perms-button
          perms="dashboard:refresh"
          :type="Types.success"
          :plain="true"
          icon="refresh"
          @action="refresh"/>
    </el-col>
  </el-row>
  <el-row :gutter="20">
    <el-col :span="12">
      <el-card class="card card-invoice">
        <template #header>
          汇总
        </template>
        <div class="content-between">
          <div class="content-column">
            <div><label class="content-column-title">发票总金额</label><span
                class="content-column-data">{{ invoiceSummary?.total }}</span> 元
            </div>
            <el-divider/>
            <div><label class="content-column-title">已开票金额</label><span
                class="content-column-data">{{ invoiceSummary?.used }}</span> 元
            </div>
            <el-divider/>
            <div><label class="content-column-title">可用发票金额</label><span
                class="content-column-data">{{ invoiceSummary?.available }}</span> 元
            </div>
          </div>
          <div class="content-column">
            <div><span class="content-column-title">发票总税额</span><span
                class="content-column-data">{{ invoiceSummary?.total_tax }}</span> 元
            </div>
            <el-divider/>
            <div><span class="content-column-title">已开票税额</span><span
                class="content-column-data">{{ invoiceSummary?.used_tax }}</span> 元
            </div>
            <el-divider/>
            <div><span class="content-column-title">可用税额</span><span
                class="content-column-data">{{ invoiceSummary?.available_tax }}</span> 元
            </div>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
  <el-row :gutter="20">
    <el-col :span="8">
      <el-card class="card card-stockin">
        <template #header>
          今日入库
        </template>
        <div class="content-between">
          <div><span class="content-between-data">{{ stockins?.today.orders }}</span> 单</div>
          <div><span class="content-between-data">{{ stockins?.today.weight.toFixed(3) }}</span> 吨</div>
          <div><span class="content-between-data">{{ stockins?.today.total.toFixed(3) }}</span> 元</div>
        </div>
      </el-card>
    </el-col>
    <el-col :span="8">
      <el-card class="card card-stockin">
        <template #header>
          本周入库
        </template>
        <div class="content-between">
          <div><span class="content-between-data">{{ stockins?.week.orders }}</span> 单</div>
          <div><span class="content-between-data">{{ stockins?.week.weight.toFixed(3) }}</span> 吨</div>
          <div><span class="content-between-data">{{ stockins?.week.total.toFixed(3) }}</span> 元</div>
        </div>
      </el-card>
    </el-col>
    <el-col :span="8">
      <el-card class="card card-stockin">
        <template #header>
          本月入库
        </template>
        <div class="content-between">
          <div><span class="content-between-data">{{ stockins?.month.orders }}</span> 单</div>
          <div><span class="content-between-data">{{ stockins?.month.weight.toFixed(3) }}</span> 吨</div>
          <div><span class="content-between-data">{{ stockins?.month.total.toFixed(3) }}</span> 元</div>
        </div>
      </el-card>
    </el-col>
  </el-row>
  <el-row :gutter="20">
    <el-col :span="8">
      <el-card class="card card-stockout">
        <template #header>
          今日出库
        </template>
        <div class="content-between">
          <div><span class="content-between-data">{{ stockouts?.today.orders }}</span> 单</div>
          <div><span class="content-between-data">{{ stockouts?.today.count }}</span> 件</div>
          <div><span class="content-between-data">{{ stockouts?.today.total.toFixed(3) }}</span> 元</div>
        </div>
      </el-card>
    </el-col>
    <el-col :span="8">
      <el-card class="card card-stockout">
        <template #header>
          本周出库
        </template>
        <div class="content-between">
          <div><span class="content-between-data">{{ stockouts?.week.orders }}</span> 单</div>
          <div><span class="content-between-data">{{ stockouts?.week.count }}</span> 件</div>
          <div><span class="content-between-data">{{ stockouts?.week.total.toFixed(3) }}</span> 元</div>
        </div>
      </el-card>
    </el-col>
    <el-col :span="8">
      <el-card class="card card-stockout">
        <template #header>
          本月出库
        </template>
        <div class="content-between">
          <div><span class="content-between-data">{{ stockouts?.month.orders }}</span> 单</div>
          <div><span class="content-between-data">{{ stockouts?.month.count }}</span> 件</div>
          <div><span class="content-between-data">{{ stockouts?.month.total.toFixed(3) }}</span> 元</div>
        </div>
      </el-card>
    </el-col>
  </el-row>

</template>

<script setup lang="ts">
//1.入库单汇总数据
import {StockInSummaryR} from "@/api/stockin";
import {ElMessage} from "element-plus";
import {onMounted, ref} from "vue";
import {StockOutTotalR} from "@/api/stockout";
import {StockInSummary} from "@/interface/stockin";
import {StockOutSummary} from "@/interface/stockout";
import {InboundInvoiceSummary} from "@/interface/inbound_invoice";
import {InboundInvoiceSummaryR} from "@/api/inbound_invoice";
import PermsButton from "@/components/PermsButton.vue";
import {Types} from "@/interface/enum";

const loading = ref<boolean>(false)
const stockins = ref<StockInSummary>()
const stockouts = ref<StockOutSummary>()

//入库发票汇总
const invoiceSummary = ref<InboundInvoiceSummary>()
const summary = () => {
  loading.value = true
  InboundInvoiceSummaryR().then(res => {
    loading.value = false
    return res.data
  }).then(res => {
    switch (res.code) {
      case 200:
        invoiceSummary.value = res.data
        break
      case 204:
        invoiceSummary.value = initInvoiceSummary()
        break
      default:
        //ElMessage.error(res.msg)
    }
  }).catch(err => {
    loading.value = false
    console.log('err:', err.toString())
    ElMessage.error('请求发票汇总数据失败')
  })
}

//入库原材料数据统计
const stockin = () => {
  StockInSummaryR().then(res => {
    return res.data
  }).then(res => {
    switch (res.code) {
      case 200: //success
        stockins.value = res.data
        break
      case 204: //没有数据
        stockins.value = initStockins()
        break
      default:
        //ElMessage.error(res.msg)
    }
  }).catch(err => {
    console.log('请求入库单数据失败：', err.toString())
    ElMessage.error('请求入库单数据失败')
  })
}


//出库单汇总数据
const stockout = () => {
  StockOutTotalR().then(res => {
    return res.data
  }).then(res => {
    switch (res.code) {
      case 200: //success
        stockouts.value = res.data
        break
      case 204: //没有数据
        stockouts.value = initStockouts()
        break
      default:
        //ElMessage.error(res.msg)
    }
  }).catch(err => {
    console.log('请求出库单数据失败：', err.toString())
    ElMessage.error('请求出库单数据失败')
  })
}

const initStockins = () => {
  return <StockInSummary>{
    today: {orders: 0, weight: 0, total: 0},
    week: {orders: 0, weight: 0, total: 0},
    month: {orders: 0, weight: 0, total: 0},
  }
}
const initStockouts = () => {
  return <StockOutSummary>{
    today: {orders: 0, count: 0, total: 0,},
    week: {orders: 0, count: 0, total: 0,},
    month: {orders: 0, count: 0, total: 0,},
  }
}
const initInvoiceSummary = () => {
  return <InboundInvoiceSummary>{
    total: 0,
    total_tax: 0,
    available: 0,
    available_tax: 0,
    used: 0,
    used_tax: 0,
  }
}


const refresh = () => {
  stockins.value = initStockins()
  stockouts.value = initStockouts()
  stockin()
  stockout()
  summary()
}

onMounted(() => {
  refresh()
})
</script>

<style lang="less" scoped>
.el-row {
  margin-bottom: 20px;
}

.card {
  min-height: 200px;
  color: white;
}

.card-invoice {
  background-color: #8683bd;
}

.card-stockin {
  background-color: #1acfab;
}

.card-stockout {
  background-color: #79bbff;
}

.content-between {
  display: flex;
  justify-content: space-between;

  &-data {
    font-size: 32px;
  }
}
</style>
